<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>财务月对账统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
    <style>
        .edit{background-color: #ed9c3a;}
        .shenhe{background-color: #429488;}
        .see{background-color: #7cb717;}
        .cur{color:#009688;}
        .del {background-color: #e85052;}    /*.laytable-cell-1-school_icon{height:100%;}*/
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        .userbox,.storebox{height:190px;margin-right:0; overflow-y: auto; z-index: 999; position: absolute; left: 0px; top: 63px; width:298px; background-color:#ffffff; border: 1px solid #ddd;}
        .userbox .list,.storebox .list{height:38px;line-height: 38px;cursor:pointer; padding-left:10px;}
        .userbox .list:hover,.storebox .list:hover{background-color:#eeeeee;}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12" style="margin-top:0px">
                        <div class="layui-card">
                            <div class="layui-card-header">财务月对账统计</div>
                            <div class="layui-card-body">
                                <div class="layui-btn-container" style="font-size:14px;">
                                    <!-- 审核状态 -->
                                    <div class="layui-form" lay-filter="component-form-group" style="display: flex;flex-wrap: wrap;">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <div class="layui-input-inline" style="width:250px;margin-right:0;">
                                                <text class="yname">日期选择</text>
                                                <input type="text" style="border-radius:5px" class="layui-input start-item-range test-item" placeholder="日期选择" lay-key="23">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="margin-left:5px;border-radius:5px">
                                                <text class="yname">代理商名称</text>
                                                <input type="text" style="border-radius:5px"tyle="border-radius:5px" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入代理商名称" class="layui-input transfer">
                                                <div class="userbox" style='display: none'></div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                                                <text class="yname">门店名称</text>
                                                <input type="text" style="border-radius:5px"name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入门店名称" class="layui-input inputstore">
                                                <div class="storebox" style='display: none'></div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                                            <text class="yname">选择通道</text>
                                                <select name="passway" id="passway" lay-filter="passway">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                                                <text class="yname">通道扣费模式</text>
                                                <select name="status" id="receive_model" lay-filter="receive_model">
                                                    <option value="">全部</option>
                                                    <option value="1">服务费模式</option>
                                                    <option value="2">代扣模式</option>
                                                    <option value="3">通道模式</option>
                                                    <option value="4">预充模式</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" style="margin-left:10px;border-radius:5px">
                                                <text class="yname">是否打标</text>
                                                <select name="mark" id="mark" lay-filter="mark">
                                                    <option value="0" selected>正常查询</option>
                                                    <option value="1">打标数据</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline" style="display: flex;align-items: center;margin-left: 10px;;">
                                            <button class="layui-btn layuiadmin-btn-list" lay-submit="" lay-filter="LAY-app-contlist-search" style="border-radius:5px;margin-top:-5px;margin-bottom: 0;height:36px;line-height: 36px;">
                                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                            </button>
                                        </div>
                                        <button class="layui-btn export" style="border-radius:5px;margin-top:20px;margin-bottom: 4px;height:36px;line-height: 36px;">导出</button>
                                        <button class="layui-btn modelexport" style="border-radius:5px;margin-top:20px;margin-bottom: 4px;height:36px;line-height: 36px;">通道扣费模式商户导出</button>
                                    </div>
                                </div>

                                <table class="layui-hide" id="test-table-page" lay-filter="test-table-page"></table>
                                <!-- <script type="text/html" id="statusTpl">
                                    @{{#  if(d.is_auth == 1){ }}
                                    <span>已授权</span>
                                    @{{#  } else { }}
                                    <span class="cur">未授权</span>
                                    @{{#  } }}
                                </script> -->

                                <script type="text/html" id="table-content-list">
                                    <a class="layui-btn layui-btn-xs mingxi" lay-event="mingxi" style="border-radius:3.5px;">账单明细</a>
                                    </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 显示明细列表 -->
<div id="openLoglist" style="display: none; background-color: #fff;">
    <div style="margin: 0 20px;">
    <button class="layui-btn logExport" style="border-radius:5px;margin-top:20px;margin-bottom: 4px;height:36px;line-height: 36px;">导出</button>
    <div style="margin: 10px 0;display:flex;color: black;font-size: 16px;text-align: center;">
		<span>总店名称：</span>
		<div class="storepidname"></div>
	</div>
    <div style="margin: 10px 0;display:flex;color: black;font-size: 16px;text-align: center;">
		<span>分店名称：</span>
		<div class="storename"></div>
	</div>
    <table id="openlistTable" lay-filter="openlistTable"></table>
    <script type="text/html" id="statusTemp">
    </script>
    </div>
</div>

<input type="hidden" class="store_id">
<input type="hidden" class="company_id">
<input type="hidden" class="receive_model">
<input type="hidden" class="user_id">
<input type="hidden" class="start-item">
<input type="hidden" class="end-item">
<input type="hidden" class="mark" value="0">
<script src="{{asset('/layuiadmin/layui/layui.js')}}"></script>
<script src="{{asset('/layuiadmin/layui/jquery-2.1.4.js')}}"></script>
<script>
    var token = localStorage.getItem("Usertoken");
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form', 'table','laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate;

        // 未登录,跳转登录页面
        $(document).ready(function(){
            if(token==null){
                window.location.href="{{url('/user/login')}}";
            }
        });

        $(".transfer").bind("input propertychange", function(event){
            user_name = $(this).val();
            if (user_name.length == 0) {
                $('.userbox').html('');
                $('.userbox').hide();
                $('.user_id').val('')
            } else {
                $.post("{{url('/api/user/get_sub_users')}}",
                {
                    token:token
                    ,user_name:$(this).val()
                    ,self:'1'
                },function(res){
                    var html="";

                    if(res.t==0){
                        $('.userbox').html('');
                    }else{
                        for(var i=0;i<res.data.length;i++){
                            html+='<div class="list" data='+res.data[i].id+'>'+res.data[i].name+'-'+res.data[i].level_name+'</div>'
                        }
                        $(".userbox").show();
                        $('.userbox').html('');
                        $('.userbox').append(html);
                    }
                },"json");
            }
        });

        $(".userbox").on("click",".list",function(){
            $('.transfer').val($(this).html());
            $('.user_id').val($(this).attr('data'));
            $('.userbox').hide();
        });

        $(".inputstore").bind("input propertychange",function(event){
            var store_name = $(this).val();
            if (store_name.length == 0) {
                $('.storebox').html('');
                $('.storebox').hide();
                $('.store_id').val('')
            } else {
                $.post("{{url('/api/user/store_lists')}}",
                {
                    token:token
                    ,store_name:$(this).val()
                    ,l:100
                },function(res){
                    var html="";
                    if(res.t==0){
                        $('.storebox').html('');
                    }else{
                        for(var i=0;i<res.data.length;i++){
                            html+='<div class="list" data='+res.data[i].store_id+'>'+res.data[i].store_name+'</div>'
                        }
                        $(".storebox").show();
                        $('.storebox').html('');
                        $('.storebox').append(html);
                    }
                },"json");
            }
        });

        $(".storebox").on("click",".list",function(){
            $('.inputstore').val($(this).html());
            $('.store_id').val($(this).attr('data'));
            $('.storebox').hide();

            // table.reload('test-table-page', {
            //     where: {
            //         user_id:$('user_id').val(),
            //         store_id:$(this).attr('data')
            //     }
            //     ,page: {
            //         curr: 1
            //     }
            // });

            $("#passway").html('');

            // // 选择通道
            // $.ajax({
            //     url : "{{url('/api/user/store_open_pay_way_lists')}}",
            //     data : {
            //         token:token
            //         ,l:100
            //         ,store_id:$('.store_id').val()
            //     },
            //     type : 'post',
            //     dataType:'json',
            //     success : function(data) {
            //         var optionStr = "";
            //         for(var i=0;i<data.data.length;i++){
            //             optionStr += "<option value='" + data.data[i].company + "'>" + data.data[i].company_desc + "</option>";
            //         }
            //         $("#passway").append('<option value="">选择通道类型</option>'+optionStr);
            //         layui.form.render('select');
            //     },
            //     error : function(data) {
            //         alert('查找板块报错');

            //     }
            // });
        });

        // 选择通道
        $.ajax({
            url : "{{url('/api/user/store_open_pay_way_lists')}}",
            data : {token:token,l:100},
            type : 'post',
            dataType:'json',
            success : function(data) {
                var optionStr = "";
                for(var i=0;i<data.data.length;i++){
                    optionStr += "<option value='" + data.data[i].company + "'>"
                    + data.data[i].company_desc + "</option>";
                }
                $("#passway").append('<option value="">选择通道类型</option>'+optionStr);
                layui.form.render('select');
            },
            error : function(data) {
                alert('查找板块报错');
            }
        });

        // var pageLoading = layer.msg('数据请求中..', {
        //     icon: 16
        //     ,shade: 0.3
        //     ,time: false
        // });

        var tableIns = table.render({
            elem: '#test-table-page'
            // ,url: "{{url('/api/v2/Bill/User/Finance/financeMonthCount')}}"
            ,url: ""
            ,method: 'get'
            ,where:{
                token:token,
            }
            ,request:{
                pageName: 'page',
                limitName: 'pagesize'
            }
            ,page: true
            ,cellMinWidth: 150
            ,cols: [[
                {field: 'date', title: '账单日期'}
                ,{field: 'oem_name', title: '平台'}
                ,{field: 'agent1_id_name',  title: '一级代理商名称'}
                ,{field: 'agent2_id_name',  title: '二级代理商名称'}
                ,{field: 'agent3_id_name',  title: '三级代理商名称'}
                ,{field: 'agent4_id_name',  title: '四级代理商名称'}
                ,{field: 'storeParent',  title: '总店名称',templet:function(info){
                    return info.storeParent.store_name || ''
                }}
                ,{field: 'store',  title: '分店名称',templet:function(info){
                    return info.store.store_name || ''
                }}
                ,{field: 'mch_no',  title: '商户号'}
                ,{field: 'receive_model_name',  title: '通道模式'}
                ,{field: 'company_name',  title: '通道名称'}
                ,{field: 'receipt_amount',  title: '皖付通有效交易金额'}
                ,{field: 'pay_rate',  title: '支付费率',templet:function(info){
                    return info.pay_rate ? info.pay_rate + '%' : ''
                }}
                ,{field: 'agent_rate',  title: '一级成本费率',templet:function(info){
                    return info.agent_rate ? info.agent_rate + '%' : ''
                }}
                ,{field: 'reward_rate',  title: '一级返佣费率',templet:function(info){
                    return info.reward_rate ? info.reward_rate + '%' : ''
                }}
                ,{field: 'agent1_fee',  title: '一级返佣金额'}
                ,{field: 'agent2_fee',  title: '二级返佣金额'}
                ,{field: 'agent3_fee',  title: '三级返佣金额'}
                ,{field: 'agent4_fee',  title: '四级返佣金额'}
                ,{align:'center', fixed: 'right', toolbar: '#table-content-list',title: '操作'}
            ]]
            ,response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'message' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,done: function(res, curr, count){
//          console.log(res);
                $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'black','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置
                // if(pageLoading){
                //     layer.close(pageLoading);
                // }
            }
        });

        var tableItemData = {}
        table.on('tool(test-table-page)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var e = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'mingxi'){
                tableItemData = e;
                $('#openLoglist .storename').html(e.store.store_name);
                $('#openLoglist .storepidname').html(e.storeParent.store_name);
                layer.open({
                    type: 1,
                    title: '账单明细列表',
                    closeBtn: 1,
                    area: '1500px',
                    shadeClose: true,
                    content: $('#openLoglist'),
                    success: function(layero, index) {
                        table.render({
                            elem: '#openlistTable'
                            ,height:480
                            ,width:2900
                            ,scrollx: true // 开启水平滚动
                            ,url: "{{url('/api/v2/Bill/User/Finance/staticBillLogList')}}"
                            ,method: 'get'
                            ,where:{
                                token:token,
                                startDate:e.startDate,
                                endDate:e.endDate,
                                store_id:e.store_id,
                                company:e.company,
                                receive_model:e.receive_model,
                                agent1_id:e.agent1_id,
                                agent2_id:e.agent2_id,
                                store_pid:e.store_pid,
                                pay_rate:e.pay_rate,
                                agent_rate:e.agent_rate,
                                mch_no:e.mch_no
                            }
                            ,request:{
                                pageName: 'page',
                                limitName: 'pagesize'
                            }
                            ,page: true
                            ,cols: [[
                                {field: 'day', title: '日期',width:130}
                                ,{field: 'out_trade_no',  title: '订单号',width:200}
                                ,{field: 'receive_model_name',  title: '通道模式',width:100}
                                ,{field: 'company_name',  title: '通道名称',width:100}
                                ,{field: 'total_fee',  title: '交易金额',width:100}
                                ,{field: 'fee_amount',  title: '手续费',width:100}
                                ,{field: 'rate',  title: '支付费率',width:100,templet:function(info){
                                    return info.rate ? info.rate + '%' : ''
                                }}
                                ,{field: 'agent1_id_name',  title: '一级代理商名称',width:160}
                                ,{field: 'agent1_rate',  title: '一级代理商成本费率',width:160,templet:function(info){
                                    return info.agent1_rate ? info.agent1_rate + '%' : ''
                                }}
                                ,{field: 'agent1_fee',  title: '一级代理商佣金',width:160}
                                ,{field: 'agent2_id_name',  title: '二级代理商名称',width:160}
                                ,{field: 'agent2_rate',  title: '二级代理商成本费率',width:160,templet:function(info){
                                    return info.agent2_rate ? info.agent2_rate + '%' : ''
                                }}
                                ,{field: 'agent2_fee',  title: '二级代理商佣金',width:160}
                                ,{field: 'agent3_id_name',  title: '三级代理商名称',width:160}
                                ,{field: 'agent3_rate',  title: '三级代理商成本费率',width:160,templet:function(info){
                                    return info.agent2_rate ? info.agent2_rate + '%' : ''
                                }}
                                ,{field: 'agent3_fee',  title: '三级代理商佣金',width:160}
                                ,{field: 'agent4_id_name',  title: '四级代理商名称',width:160}
                                ,{field: 'agent4_rate',  title: '四级代理商成本费率',width:160,templet:function(info){
                                    return info.agent2_rate ? info.agent2_rate + '%' : ''
                                }}
                                ,{field: 'agent4_fee',  title: '四级代理商佣金',width:160}
                                ,{field: 'status',  title: '类型',width:100,templet:function(ele){
                                    let title = ''
                                    if(ele.status == 1){
                                        title = '支付'
                                    }else if(ele.status == 2){
                                        title = '退款'
                                    }
                                    return title
                                }}
                            ]]
                            ,response: {
                                statusName: 'status' //数据状态的字段名称，默认：code
                                ,statusCode: 1 //成功的状态码，默认：0
                                ,msgName: 'message' //状态信息的字段名称，默认：msg
                                ,countName: 'total' //数据总数的字段名称，默认：count
                                ,dataName: 'data' //数据列表的字段名称，默认：data
                            }
                            ,done: function(res, curr, count){
                                $('th').css({'font-weight': 'bold', 'font-size': '15','color': 'black','background':'linear-gradient(#f2f2f2,#cfcfcf)'});	//进行表头样式设置
                            }
                        });
                    }
                });
            }
            });

        laydate.render({
            elem: '.start-item-range'
            ,type: 'date'
            ,range:'至'
            ,max: 0 // 限制最大日期为今天
            ,done: function(value){
                if(value){
                    $('.start-item').val(value.substring(0,10))
                    $('.end-item').val(value.substring(13,value.length))
                }else{
                    $('.start-item').val('')
                    $('.end-item').val('')
                }
            }
        });

        // 监听输入框的变化，如果为空则清空另一个输入框的值
        $('#start-item-range').on('input', function() {
            if ($(this).val() === '') {
                $('.start-item').val('')
                $('.end-item').val('')
            }
        });

        // 选择通道类型
        form.on('select(passway)', function(data){
            var company_id = data.value;
            $('.company_id').val(company_id);

            //执行重载
            // table.reload('test-table-page', {
            //     where: {
            //         company:company_id
            //     }
            //     ,page: {
            //         curr: 1 //重新从第 1 页开始
            //     }
            // });
        });

         // 选择通道扣费模式
         form.on('select(receive_model)', function(data){
            var model = data.value;
            $('.receive_model').val(model);

            //执行重载
            // table.reload('test-table-page', {
            //     where: {
            //         company:company_id
            //     }
            //     ,page: {
            //         curr: 1 //重新从第 1 页开始
            //     }
            // });
        });

         // 选择是否打标数据
         form.on('select(mark)', function(data){
            var model = data.value;
            $('.mark').val(model);

            //执行重载
            // table.reload('test-table-page', {
            //     where: {
            //         company:company_id
            //     }
            //     ,page: {
            //         curr: 1 //重新从第 1 页开始
            //     }
            // });
        });

         //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            //执行重载
            var pageLoading = layer.msg('数据请求中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            let starttime = $('.start-item').val();
            let endtime = $('.end-item').val();
            let startDate = '';
            let endDate = '';
            if(starttime && endtime){
                //处理开始时间和结束时间
                startDate = starttime.length<12 ? starttime + ' 00:00:00' : starttime;
                endDate = endtime.length<12 ? endtime + ' 23:59:59' : endtime;
            }else{
                layer.msg('请选择时间!') 
                return
            }
            let Values = { 
                startDate:startDate,
                endDate:endDate,
                receive_model:$('.receive_model').val(),
                company:$('.company_id').val(),
                store_id:$('.store_id').val(),
                agent_id:$('.user_id').val(),
                mark:$('.mark').val()
            }
            let paramsValue = {
                token:token
            }
            for(let i in Values){
              if(Values[i]){
                paramsValue[i] = Values[i]
              }
            }
            tableIns.reload({
                url: "{{url('/api/v2/Bill/User/Finance/financeMonthCount')}}",
                where: {...paramsValue},
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                done:function(res, curr, count){
                    layer.close(pageLoading);
                }
            });
        });

        $('.export').click(function(){
            //执行重载
            var exportLoading = layer.msg('数据导出中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            var store_id = $('.store_id').val();
            var company = $('.company_id').val();
            let agent_id = $('.user_id').val();
            let starttime = $('.start-item').val();
            let endtime = $('.end-item').val();
            let startDate = '';
            let endDate = '';
            if(starttime && endtime){
                //处理开始时间和结束时间
                startDate = starttime.length<12 ? starttime + ' 00:00:00' : starttime;
                endDate = endtime.length<12 ? endtime + ' 23:59:59' : endtime;
            }else{
                layer.msg('请选择时间!') 
                return
            }
            var receive_model = $('.receive_model').val();
            let Values = { store_id,company,startDate,endDate,receive_model,agent_id }
            let paramsValue = {}
            for(let i in Values){
              if(Values[i]){
                paramsValue[i] = Values[i]
              }
            }
            $.ajax({
                url : "{{url('/api/v2/Bill/User/Finance/financeMonthCountExport')}}",
                data : {
                    token:token,
                    ...paramsValue
                },
                type : 'post',
                success : function(data) {
                    layer.close(exportLoading);
                    if(data){
                        let returnData = JSON.parse(data);
                        if (returnData.status == 1) {
                            let urls = returnData.data ? returnData.data.replace(/http:\/\//i, 'https://'):'';
                            urls && (window.location.href=urls);
                        } else {
                            alert(returnData.message);
                        }
                    }
                },
                error : function(data) {
                    layer.close(exportLoading);
                    alert('查找板块报错');
                }
            });
        })
        
        $('.logExport').click(function(){
            //执行重载
            var exportLoading = layer.msg('数据导出中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            let Values = { 
                token:token,
                startDate:tableItemData.startDate,
                endDate:tableItemData.endDate,
                store_id:tableItemData.store_id,
                company:tableItemData.company,
                receive_model:tableItemData.receive_model,
                agent1_id:tableItemData.agent1_id,
                agent2_id:tableItemData.agent2_id,
                store_pid:tableItemData.store_pid,
                pay_rate:tableItemData.pay_rate,
                agent_rate:tableItemData.agent_rate,
                mch_no:tableItemData.mch_no
             }
            let paramsValue = {}
            for(let i in Values){
              if(Values[i]){
                paramsValue[i] = Values[i]
              }
            }
            $.ajax({
                url : "{{url('/api/v2/Bill/User/Finance/staticBillLogListExport')}}",
                data : {
                    token:token,
                    ...paramsValue
                },
                type : 'post',
                success : function(data) {
                    layer.close(exportLoading);
                    if(data){
                        let returnData = JSON.parse(data);
                        if (returnData.status == 1) {
                            let urls = returnData.data ? returnData.data.replace(/http:\/\//i, 'https://'):'';
                            urls && (window.location.href=urls);
                        } else {
                            alert(returnData.message);
                        }
                    }
                },
                error : function(data) {
                    layer.close(exportLoading);
                    alert('查找板块报错');
                }
            });
        })

        //扣费模式商户列表导出
        $('.modelexport').click(function (){
            var exportLoading = layer.msg('数据请求中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            window.location.href="{{url('/api/user/store_company_model_list')}}"+"?token="+token;
            layer.close(exportLoading);
        })
    });

</script>

</body>
</html>
